{% extends 'home/base.html' %}

{% block title %}
    接口新增发布页
{% endblock %}

{% block content_header %}
    新增接口
{% endblock %}

{% block header_option_desc %}
    开始你的接口测试吧～
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-12 col-xs-12 col-sm-12">
            <div class="box box-primary">
                <div class="box-body">
                    <div class="form-group">

                        <div class="api-url">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="api-title">接口名称</label>
                                    <input type="text" class="form-control" id="api-title" name="news-title"
                                           placeholder="请输入接口名称"
                                           style="width: 30%; border-radius:5px;">
                                    <br>

                                    <div class="box box-default">
                                        <div class="box-header with-border">
                                            <label for="url"><h3 class="box-title">URL</h3></label>

                                            <div class="box-tools pull-right">
                                                <button type="button" class="btn btn-box-tool" data-widget="collapse"
                                                        id="url"><i
                                                        class="fa fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="box-body">
                                            <div class="box-body">
                                                <table class="table table-bordered">
                                                    <tbody>
                                                    <label>请求方式：</label>
                                                    <select class="select2 col-5" style="width: 20%;" tabindex="-1"
                                                            aria-hidden="true" id="api_method">
                                                        <option selected="selected">GET</option>
                                                        <option>POST</option>
                                                        <option>PUT</option>
                                                        <option>DELETE</option>
                                                    </select>
                                                    <span class="select2 select2-container select2-container--default select2-container--below"
                                                          dir="ltr" style="width: 100%;">
                    <span class="selection">
                        <span class="select2-selection__arrow" role="presentation">
                          <b role="presentation">
                        </b>
                        </span>
                      </span>
                    </span>
                                                    <span class="dropdown-wrapper"
                                                          aria-hidden="true"></span>

                                                    <label>传输协议：</label>
                                                    <select class="select2 col-5" style="width: 20%;" tabindex="-1"
                                                            aria-hidden="true" id="agreement">
                                                        <option selected="selected">http</option>
                                                        <option>https</option>
                                                    </select>
                                                    <span class="select2 select2-container select2-container--default select2-container--below"
                                                          dir="ltr" style="width: 100%;">
                    <span class="selection">
                        <span class="select2-selection__arrow" role="presentation">
                          <b role="presentation">
                        </b>
                        </span>
                      </span>
                    </span>
                                                    <span class="dropdown-wrapper"
                                                          aria-hidden="true"></span>
                                                    <input type="text" class="form-control" id="add-url"
                                                           name="news-title" placeholder="请输入URL"
                                                           style="border-radius: 5px">


                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="box box-default collapsed-box">
                                        <div class="box-header with-border">
                                            <label for="header"><h3 class="box-title">请求头部</h3></label>

                                            <div class="box-tools pull-right">
                                                <button type="button" class="btn btn-box-tool" data-widget="collapse"
                                                        id="header"><i
                                                        class="fa fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="box-body">

                                            <div class="box-body">
                                                <table class="table table-bordered" id="head_data">
                                                    <tbody>
                                                    <tr>
                                                        <th style="width: 40px">
                                                            <a href="javascript:void(0)" id="head_data_add">
                                                                <i class="fa fa-fw fa-plus-circle"
                                                                   style="font-size:25px;"></i>
                                                            </a>
                                                        </th>
                                                        <th>键</th>
                                                        <th>值</th>
                                                        <th style="width: 20px">注释</th>
                                                    </tr>
                                                    <tr>
                                                        <td>1</td>
                                                        <td><input type="text" placeholder="请输入请求键"
                                                                   style="border-radius: 5px"></td>
                                                        <td><input type="text" placeholder="请输入请求值"
                                                                   style="border-radius: 5px"></td>
                                                        <td><input type="text" placeholder="请输入注释"
                                                                   style="border-radius: 5px"></td>
                                                    </tr>


                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="box box-default collapsed-box">
                                        <div class="box-header with-border">
                                            <label for="request_info"><h3 class="box-title">请求参数</h3></label>

                                            <div class="box-tools pull-right">
                                                <button type="button" class="btn btn-box-tool" data-widget="collapse"
                                                        id="request_info"><i
                                                        class="fa fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="box-body">

                                            <div class="box-body">
                                                <table class="table table-bordered" id="resquest_data">
                                                    <tbody>
                                                    <tr>
                                                        <th style="width: 40px">
                                                            <a href="javascript:void(0)" id="add_new_data">
                                                                <i class="fa fa-fw fa-plus-circle"
                                                                   style="font-size:25px;"></i>
                                                            </a>
                                                        </th>
                                                        <th>键</th>
                                                        <th>值</th>
                                                        <th style="width: 40px">注释</th>
                                                    </tr>
                                                    <tr>
                                                        <td>1</td>
                                                        <td><input type="text" placeholder="请输入请求键"
                                                                   style="border-radius: 5px"></td>
                                                        <td><input type="text" placeholder="请输入请求值"
                                                                   style="border-radius: 5px"></td>
                                                        <td><input type="text" placeholder="请输入注释"
                                                                   style="border-radius: 5px"></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="box box-default collapsed-box">
                                        <div class="box-header with-border">
                                            <label for="collection"><h3 class="box-title">接口集</h3></label>
                                            <div class="box-tools pull-right">
                                                <button type="button" class="btn btn-box-tool" data-widget="collapse"
                                                        id="collection"><i
                                                        class="fa fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="box-body">
                                            <div class="box-body">
                                                <table class="table table-bordered">
                                                    <tbody>
                                                    <select name="news-category" id="news-category"
                                                            class="form-control">
                                                        <option value="0">-- 请选择接口集 --</option>
                                                        {% for one_tag in tags %}
                                                            <!-- 传tag_id到后台 -->
                                                            {% if news and one_tag == news.tag %}
                                                                <option value="{{ one_tag.id }}"
                                                                        selected>{{ one_tag.name }}</option>
                                                            {% else %}
                                                                <option value="{{ one_tag.id }}">{{ one_tag.name }}</option>
                                                            {% endif %}
                                                        {% endfor %}
                                                    </select>
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    {% if news %}
                        <a href="javascript:void (0);" class="btn btn-primary pull-right" id="btn-pub-news"
                           data-news-id="{{ news.id }}">更新接口 </a>
                    {% else %}
                        <a href="javascript:void (0);" class="btn btn-primary pull-right" id="btn-add-lapi">新增接口 </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script src="/static/js/index/api_add.js"></script>
{% endblock %}